<template>
  <!-- 空置天数排行TOP5 -->
  <div class="vacant-rank chart-box2">
    <div class="chart-title">房源空置天数排行TOP5</div>
    <div class="chart-content">
      <ScrollTable :header="tableHeader" :list="data" :config="config" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import common from "../../utils/common";
import store from "../../../../store";
import ScrollTable from "../common/ScrollTable.vue";

export default defineComponent({
  name: "VacantRank",
  components: { ScrollTable },
  setup() {
    const state = reactive({
      tableHeader: [
        { key: "index", title: "" },
        { key: "name", title: "空置房源" },
        { key: "vacant_days", title: "空置天数" },
        { key: "vacant_area", title: "空置面积" },
      ],
      data: [],
      config: {
        span: [4, 12, 4, 4],
        style: [{ color: common.theme.textGreen }],
      },
    });

    watch(
      () => store.getters.rentControl.RoomVacantRank,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { RoomVacantRank } = store.getters.rentControl;
      if (RoomVacantRank && RoomVacantRank.length) {
        state.data = RoomVacantRank;
      } else {
        state.data = [];
      }
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
